<!--
 * @Date: 2022-03-24 11:21:12
 * @LastEditors: wuyuxin
 * @LastEditTime: 2022-03-24 16:40:31
 * @FilePath: \Vue3-code\05_composition_api\src\02_compositionAPI基础\Home.vue
 * @description: 文件描述
-->
<template>
  <div>
    Home Page
    <h2>{{message}}</h2>
    <!-- 当我们在template模板中使用ref对象, 它会自动进行解包 -->
    <h2>当前计数: {{counter}}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
  import { reactive, ref } from 'vue'
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    },
    setup() {
      // counter编程一个ref的可响应式的引用
      let counter = ref(100)

      // 局部函数
      const increment = () => {
        counter.value++;
        console.log(counter);
      }

      return {
        title: "Hello Home",
        counter,
        increment
      }
    }
  }
</script>

<style scoped>

</style>